<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>

<body>
<div id="app">
    <div class="mb-4">
        <el-button disabled>Default</el-button>
        <el-button type="primary" disabled>Primary</el-button>
        <el-button type="success" disabled>Success</el-button>
        <el-button type="info" disabled>Info</el-button>
        <el-button type="warning" disabled>Warning</el-button>
        <el-button type="danger" disabled>Danger</el-button>
    </div>
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
        Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
    <el-button
            v-for="button in buttons"
            :key="button.text"
            :type="button.type"
            link
    >
        {{ button.text }}
    </el-button>

    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>

    <el-select v-model="status" placeholder="图书状态"  class="search-input" >
        <el-option label="未上架" value="0"></el-option>
        <el-option label="在馆"   value="1"></el-option>
        <el-option label="借出"   value="2"></el-option>
    </el-select>
</div>
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const { createApp, reactive } = Vue;
    // const { ElTable, ElTableColumn } = ElementPlus;

    const app = {
        // components: {
        //     ElTable,
        //     ElTableColumn
        // },

        setup() {
            const buttons = Vue.ref([
                { type: '', text: 'plain' },
                { type: 'primary', text: 'primary' },
                { type: 'success', text: 'success' },
                { type: 'info', text: 'info' },
                { type: 'warning', text: 'warning' },
                { type: 'danger', text: 'danger' },
            ])
            const tableData = reactive([
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ]);
            return {
                tableData,buttons
            };
        }
    };
    createApp(app).use(ElementPlus).mount('#app');
</script>
</body>

</html>